<template>
  <div class="root-box">

    <!--表单设计-->
    <el-popover v-if="strings.defaultString(type,'form') == 'form'"
      placement="top-start"
      width="1200"
      popper-class="popper600"
      trigger="click" >
      <el-button tile="点击编辑该视图条件" type="warning" icon="el-icon-edit" slot="reference" circle></el-button>
      <strong>控件分类：{{item.inputType}}，控件类型：{{item.dict}}，控件标识：{{item.name}}</strong>
      <el-form  label-position="left" :model="item" :inline="true" label-width="120px" >
        <el-tabs  @tab-click="tabClick">
          <el-tab-pane label="基本属性" class="pane-main">
            <el-row >
              <el-col :span="12">
                <el-form-item   label="列数"  >
                  <el-input-number size="mini"   v-model="item.colSpan" label="显示列数(2-24)" :precision="0" :step="2" :min="2" :max="24"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <small>1-24</small>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                <el-form-item   label="标签面板索引"  >
                  <el-input-number size="mini"   v-model="item.tabPaneIndex" label="0-99" :precision="0" :step="1" :min="0" :max="24"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <small>即一个标签页内的显示顺序，0-99</small>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                <el-form-item   label="主控件"  >
                  <el-switch
                    v-model="item.flagTabMain"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <small>一个标签页内只有一个主控件，标签页的标题将显示住控件的值</small>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                <el-form-item   label="先保存表单"  >
                  <el-switch
                    v-model="item.flagSaveForm"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <small>比如，树控件使用了主表id，那么，需要先进行主表保存，只有主表未保存的情况下才会进行保存</small>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                <el-form-item   label="控件标识"  >
                  <el-input    v-model="item.name"   />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <small>该标识在单个上下文中是唯一的，可以通过 this.$refs[控件标识][0]使用</small>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                <el-form-item   label="用户提示信息"  >
                  <el-input    v-model="item.userMsg"   />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <small>用户提示信息，显示在最上方的用户提示信息</small>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                <el-form-item   label="数据源"  >
                  <el-input    v-model="item.source"   />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <small>数据获取地址，树控件等</small>
              </el-col>
            </el-row>
          </el-tab-pane>

          <!--数据视图的配置  开始-->
          <el-tab-pane label="数据视图特有属性" class="pane-main" v-if="item.inputType == 'dataview'">
            <el-row >
              <el-col :span="12">
                <el-form-item   label="自动加载数据"  >
                  <el-switch v-model="item.propAutoFetchData" active-color="#13ce66" inactive-color="Gray" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <small>propAutoFetchData 属性，如果不自动加载，那么需要手动加载数据，一般是结构加载完成后</small>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                <el-form-item  label="禁用单元格双击"  >
                  <el-switch v-model="item.propsDisableDbClick" active-color="#13ce66" inactive-color="Gray" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <small>propsDisableDbClick 属性，true:单元格不响应双击事件</small>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                <el-form-item   label="仅查询"  >
                  <el-switch v-model="item.propOnlyQuery2" active-color="#13ce66" inactive-color="Gray" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <small>propOnlyQuery2 属性，true:只保留用户搜索条件及搜索类按钮</small>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                <el-form-item   label="隐藏流程筛选"  >
                  <el-switch v-model="item.propHideFlowSelect" active-color="#13ce66" inactive-color="Gray" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <small>propHideFlowSelect 属性，true:隐藏流程筛选下拉框</small>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                <el-form-item  label="分页数量"  >
                  <el-input v-model="item.propPageSize" type="number"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <small>propPageSize 属性，每页显示数量，如果传递的话，将强制使用传递的数值</small>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                用户参数
                <codemirror   ref="propUserParam" v-model="item.propUserParam" :options="editOptions"  ></codemirror>
              </el-col>
              <el-col :span="12">
                <small>propUserParam 属性，传递后台，参数值UserParam</small>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                前置查询条件
                <codemirror   ref="propPreQueryWrapper" v-model="item.propPreQueryWrapper" :options="editOptions"  ></codemirror>
              </el-col>
              <el-col :span="12">
                <small>propPreQueryWrapper 属性，固定查询参数</small>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                其他待扩展
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
          </el-tab-pane>

          <el-tab-pane label="数据视图特有方法" class="pane-main" v-if="item.inputType == 'dataview'" >
            <el-tabs :tab-position="'left'" @tab-click="tabClick">
              <el-tab-pane label="扩展按钮事件" class="code-box">
                <el-row >
                  <el-col :span="14">
                    <codemirror ref="extraButtonClick" v-model="item.extraButtonClick" :options="editOptions"  ></codemirror>
                  </el-col>
                  <el-col :span="10" style=" padding-left: 18px;">
                    <small>extra-button-click事件，网格工具栏或者明细操作栏按钮点击后触发。以下为示例代码</small>
                    <codemirror   ref="extraButtonClickExamp" v-model="extraButtonClickExamp" :options="editOptionsReadonly"  ></codemirror>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="保存后" class="code-box">
                <el-row >
                  <el-col :span="14">
                    <codemirror ref="afterSave" v-model="item.afterSave" :options="editOptions"  ></codemirror>
                  </el-col>
                  <el-col :span="10" style=" padding-left: 18px;">
                    <small>after-save事件，表单保存后触发。以下为示例代码</small>
                    <codemirror   ref="afterSaveExamp" v-model="afterSaveExamp" :options="editOptionsReadonly"  ></codemirror>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="删除后" class="code-box">
                <el-row >
                  <el-col :span="14">
                    <codemirror ref="afterDelete" v-model="item.afterDelete" :options="editOptions"  ></codemirror>
                  </el-col>
                  <el-col :span="10" style=" padding-left: 18px;">
                    <small>after-delete事件，删除数据后后触发。以下为示例代码</small>
                    <codemirror   ref="afterDeleteExamp" v-model="afterDeleteExamp" :options="editOptionsReadonly"  ></codemirror>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="结构加载完" class="code-box">
                <el-row >
                  <el-col :span="14">
                    <codemirror ref="viewReady" v-model="item.viewReady" :options="editOptions"  ></codemirror>
                  </el-col>
                  <el-col :span="10" style=" padding-left: 18px;">
                    <small>view-ready事件，结构加载完成后触发。以下为示例代码</small>
                    <codemirror   ref="viewReadyExamp" v-model="viewReadyExamp" :options="editOptionsReadonly"  ></codemirror>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label=选择改变后 class="code-box">
                <el-row >
                  <el-col :span="14">
                    <codemirror ref="selectChange" v-model="item.selectChange" :options="editOptions"  ></codemirror>
                  </el-col>
                  <el-col :span="10" style=" padding-left: 18px;">
                    <small>select-change事件，选择后触发。以下为示例代码</small>
                    <codemirror   ref="selectChangeExamp" v-model="selectChangeExamp" :options="editOptionsReadonly"  ></codemirror>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="行编辑输入后" class="code-box">
                <el-row >
                  <el-col :span="14">
                    <codemirror ref="editInput" v-model="item.editInput" :options="editOptions"  ></codemirror>
                  </el-col>
                  <el-col :span="10" style=" padding-left: 18px;">
                    <small>edit-input事件，单元格输入后触发。以下为示例代码</small>
                    <codemirror   ref="editInputExamp" v-model="editInputExamp" :options="editOptionsReadonly"  ></codemirror>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <!--数据视图的配置  结束-->

          <!--element-tree  开始-->
          <el-tab-pane label="树控件特有" class="pane-main" v-if="item.inputType == 'element' && item.dict == 'el_tree'" >
            <el-tabs :tab-position="'left'" @tab-click="tabClick">
              <el-tab-pane label="属性" class="code-box">
                <el-row >
                  <el-col :span="12">
                    <el-form-item   label="显示复选框"  >
                      <el-switch v-model="item.showCheckbox" active-color="#13ce66" inactive-color="Gray" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <small>show-checkbox 属性，true:该树控件显示左侧复选框</small>
                  </el-col>
                </el-row>
                <el-row >
                  <el-col :span="12">
                    <el-form-item   label="展开所有"  >
                      <el-switch v-model="item.defaultExpandAll" active-color="#13ce66" inactive-color="Gray" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <small>default-expand-all 属性，true: 默认展开所有树节点</small>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="查询参数" class="code-box">
                <el-row >
                  <el-col :span="14">
                    <codemirror ref="treeDataParam" v-model="item.treeDataParam" :options="editOptions"  ></codemirror>
                  </el-col>
                  <el-col :span="10" style=" padding-left: 18px;">
                    <small>树查询参数，以下为示例代码</small>
                    <codemirror   ref="treeDataParamExamp" v-model="treeDataParamExamp" :options="editOptionsReadonly"  ></codemirror>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="数据转换方法" class="code-box">
                <el-row >
                  <el-col :span="14">
                    <codemirror ref="treeDataConvert" v-model="item.treeDataConvert" :options="editOptions"  ></codemirror>
                  </el-col>
                  <el-col :span="10" style=" padding-left: 18px;">
                    <small>转换数据，treeData为固定对象名称，以下为示例代码</small>
                    <codemirror   ref="treeDataConvertExamp" v-model="treeDataConvertExamp" :options="editOptionsReadonly"  ></codemirror>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="保存方法" class="code-box">
                <el-row >
                  <el-col :span="6">
                    <el-form-item   label="保存按钮"  >
                      <el-switch v-model="item.treeSave" active-color="#13ce66" inactive-color="Gray" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item   label="未选择禁止提交"  >
                      <el-switch v-model="item.treeNotAllowSaveIfnull" active-color="#13ce66" inactive-color="Gray" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item   label="保存地址"  >
                      <el-input v-model="item.treeSaveUrl" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row >
                  <el-col :span="24">
                    <small>
保存按钮=true，显示保存按钮。未选择禁止提交=true，如果没有选择任何树节点，则不允许提交。保存地址（eg:/authority/role/addMenus），post提交。固定参数格式如下：
                        <pre>
{
  nodeIds: 'id1,id2',  //所选节点id
  formAttr1: '1'   //form属性，即form对象所有的属性都会传递过去
}
                        </pre>

                    </small>
                  </el-col>
                </el-row>
                <el-row >
                  <el-col :span="14">
                    保存附加参数
                    <codemirror ref="treeSaveParam" v-model="item.treeSaveParam" :options="editOptions"  ></codemirror>
                  </el-col>
                  <el-col :span="10" style=" padding-left: 18px;">
                    <small>保存提交时附加参数，如果存在则覆盖form里面的参数值，如: {opType: 1}</small>
                  </el-col>
                </el-row>

                <el-row >
                  <el-col :span="14">
                    保存后执行
                    <codemirror ref="treeSaveAfter" v-model="item.treeSaveAfter" :options="editOptions"  ></codemirror>
                  </el-col>
                  <el-col :span="10" style=" padding-left: 18px;">
                    <small>保存后执行的方法，当前所操作的树保存后会自动刷新，如果多棵树级联，则需要相互刷新，如:
                      <pre>
                        this.loadDatas('el_tree_left')
                        this.loadDatas('el_tree_right')
                      </pre>
                    </small>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <!--element-tree  结束-->
        </el-tabs>
      </el-form>
    </el-popover>
    <data-view :propAutoFetchData="false" ref="dataviewTmp" style="display: none"/>

    <!--列表设计-->
    <div v-if="strings.defaultString(type,'form') == 'list'">
      <el-tabs :tab-position="'left'" @tab-click="tabClick">
        <el-tab-pane label="基本属性"  >
          <el-row >
            <el-col :span="12">
              <el-form-item   label="禁用双击"  >
                <el-switch v-model="form.propsDisableDbClick" active-color="#13ce66" inactive-color="Gray" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <small>propsDisableDbClick 属性，true:禁用列表双击</small>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="扩展按钮事件" class="code-box">
          <el-row >
            <el-col :span="14">
              <el-input v-model="form.listExtraButtonClick" size="medium" type="textarea" :autosize="{ minRows: 1, maxRows: 50}"/>
            </el-col>
            <el-col :span="10" style=" padding-left: 18px;">
              <small>extra-button-click事件，网格工具栏或者明细操作栏按钮点击后触发。以下为示例代码</small>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
/* eslint-disable*/
import { codemirror } from 'vue-codemirror'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/theme/monokai.css'
import'codemirror/addon/selection/active-line.js'
import'codemirror/addon/selection/mark-selection.js'
import'codemirror/addon/search/searchcursor.js'
import'codemirror/addon/hint/show-hint.js'
import'codemirror/addon/hint/show-hint.css'
import'codemirror/addon/hint/javascript-hint.js'
import'codemirror/addon/selection/active-line.js'
import'codemirror/addon/scroll/annotatescrollbar.js'
import'codemirror/addon/search/matchesonscrollbar.js'
import'codemirror/addon/search/searchcursor.js'
import'codemirror/addon/search/match-highlighter.js'
import'codemirror/mode/clike/clike.js'
import'codemirror/addon/edit/matchbrackets.js'
import'codemirror/addon/comment/comment.js'
import'codemirror/addon/dialog/dialog.js'
import'codemirror/addon/dialog/dialog.css'
import'codemirror/addon/search/searchcursor.js'
import'codemirror/addon/search/search.js'
import'codemirror/keymap/sublime.js'
import'codemirror/addon/fold/foldgutter.css'
import'codemirror/addon/fold/brace-fold.js'
import'codemirror/addon/fold/comment-fold.js'
import'codemirror/addon/fold/foldcode.js'
import'codemirror/addon/fold/foldgutter.js'
import'codemirror/addon/fold/indent-fold.js'
import'codemirror/addon/fold/markdown-fold.js'
import'codemirror/addon/fold/xml-fold.js'
// 核心样式
import 'codemirror/lib/codemirror.css'

export default {
  components:{codemirror},
  name: 'designDataviewMore',
  data() {
    return {
      dataviewProps: [],
      editOptions: {
        tabSize: 4,
        styleActiveLine: true,
        lineNumbers: true,
        styleSelectedText: false,
        line: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
        mode: 'text/javascript',
        // hint.js options
        hintOptions:{
          completeSingle: false
        },
        keyMap: "sublime",
        matchBrackets: true,
        showCursorWhenSelecting: true,
        theme: "monokai",
        extraKeys: { "Ctrl": "autocomplete" }
      },
      editOptionsReadonly: {
        tabSize: 4,
        styleActiveLine: true,
        lineNumbers: true,
        styleSelectedText: false,
        line: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
        mode: 'text/javascript',
        // hint.js options
        hintOptions:{
          completeSingle: false
        },
        keyMap: "sublime",
        matchBrackets: true,
        showCursorWhenSelecting: true,
        theme: "monokai",
        extraKeys: { "Ctrl": "autocomplete" },
        readOnly: true,        //只读
      },
      extraButtonClickExamp: `switch(param.button.key) {
\t case 'addOne':
\t\tuserArr = [param.data]
\t\tbreak;
\t case 'addMul':
\t  \tif (!param.data || param.data.length <1) {
\t\t  this.utilMessage.warning('请选择需要添加的用户')
\t\t  return
\t\t}
\t\tuserArr=param.data
\t\tbreak;
}
this.utilVue.loadShow(true)
let userIds = []
userArr.forEach(ob => userIds.push(ob.id))
const params = {
  roleId: this.form.id,
  userIds: userIds.join(',')
}
this.$ajax.post('/roleuser/addUserIds', params).then(response => {
  if (response.code == 0) {
    that.utilMessage.success(response.msg)
    that.utilVue.loadHide()
    that.$refs.sys_user_roleedit_new[0].fetchData()
    that.$refs.role_sys_user_new[0].fetchData()
  }
})
      `,
      afterSaveExamp: ``,
      afterDeleteExamp: ``,
      viewReadyExamp: ``,
      selectChangeExamp: ``,
      editInputExamp: ``,
      treeDataConvertExamp: `let config = {
  rootNode: {
\tid: '0',
\tparentId: '-1',
\tname: '根节点'
  },
  keyFieldName: 'id',
  parentFieldName: 'parentId',
  labelFieldName: 'name'
}
global.utils.convertToTree(treeData,config )`,
      treeDataParamExamp: `{
 roleId: this.strings.defaultString(this.form.id,-1)
}`,
      listExtraButtonClickExamp: ``
    }
  },
  props: ['item','type', 'form'],
  methods: {
    //获取标题
    getPreviewTitle(item) {
      return item.title ? item.title : item.name+ '(未配置显示名称)'
    },
    tabClick() {
      //需要点击一下才能显示的bug
      if (this.strings.defaultString(this.type,'form') == 'list') {
       /* if (this.$refs.listExtraButtonClick) this.$refs.listExtraButtonClick.refresh()
        if (this.$refs.listExtraButtonClickExamp) this.$refs.listExtraButtonClickExamp.refresh()*/
      } else {
        if (this.item && this.item.inputType == 'dataview') {
          this.$refs.extraButtonClick.refresh()
          this.$refs.extraButtonClickExamp.refresh()
          this.$refs.afterSave.refresh()
          this.$refs.afterSaveExamp.refresh()
          this.$refs.afterDelete.refresh()
          this.$refs.afterDeleteExamp.refresh()

          this.$refs.viewReady.refresh()
          this.$refs.viewReadyExamp.refresh()
          this.$refs.selectChange.refresh()
          this.$refs.selectChangeExamp.refresh()
          this.$refs.editInput.refresh()
          this.$refs.editInputExamp.refresh()

          this.$refs.propPreQueryWrapper.refresh()
          this.$refs.propUserParam.refresh()
        } else  if (this.item && this.item.inputType == 'element') {
          this.$refs.treeDataParam.refresh()
          this.$refs.treeDataParamExamp.refresh()

          this.$refs.treeDataConvert.refresh()
          this.$refs.treeDataConvertExamp.refresh()
          this.$refs.treeSaveParam.refresh()
          this.$refs.treeSaveAfter.refresh()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .pane-main{
    max-height: 600px;
    overflow-y: auto;
  }

  .root-box{
    .code-box{
      height: 500px;
    }
  }
</style>
